<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<style>
   *{
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    ul{
        width:800px;
        height: 800px;
        border: 1px solid red;
        /*将ul设置为弹性元素*/
        display: flex;
        /* flex-direction: row; */

            /*设置元素在弹性盒里面是否换行！
           如果为wrap就会沿着侧轴自动换行！,这里是排列是行排列方法，就是往下排列
           
           flex-wrap: wrap-reverse 沿着侧轴反向换行
        
           */
        /* flex-wrap: wrap; */

        /* flex-flow: wrap row;设置 row 和 wrap 换行 */

        justify-content: flex-start;/*元素排列方法，从主轴的时候
                                   排列  
              justify-content: flex-end; 从主轴末尾开始排列
              justify-content: center;  从弹性盒中间
              justify-content: space-around 弹性盒的空白分配到元素的两侧
                             space-between 均匀分步到中间
                             space-evenly   分布到单侧               
         */
    }

    li{
        width: 100px;
        height: 100px;
        font-size: 50px;
        text-align: center;
        line-height: 100px;
    
        
    }
    li:nth-child(1){
        background-color: royalblue;
    
       
    }
    li:nth-child(2){
        background-color:red;
    
    }
    li:nth-child(3){
        background-color: blueviolet;
      
    }

</style>
<body>

      <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        
      </ul>
</body>
</html>
</html>